<template>
  <view class="box-shuttle">
    <view class="sparkler">
      <view
        class="sparkler__spark"
        style="
          --rotation: 262;
          --delay: 0.6779807201299441;
          --speed: 0.5;
          --travel: 97;
          --h: 23;
          --s: 67;
          --l: 59;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 242;
          --delay: 0.14228294777193362;
          --speed: 0.4;
          --travel: 90;
          --h: 33;
          --s: 88;
          --l: 51;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 103;
          --delay: 0.5883091077647706;
          --speed: 0.7;
          --travel: 56;
          --h: 41;
          --s: 94;
          --l: 55;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 155;
          --delay: 0.896818873947751;
          --speed: 0.5;
          --travel: 82;
          --h: 51;
          --s: 71;
          --l: 75;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 155;
          --delay: 0.7553119662665275;
          --speed: 0.8;
          --travel: 84;
          --h: 54;
          --s: 77;
          --l: 83;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 152;
          --delay: 0.3671479239723694;
          --speed: 0.3;
          --travel: 141;
          --h: 31;
          --s: 65;
          --l: 78;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 146;
          --delay: 0.8763266815519508;
          --speed: 0.6;
          --travel: 104;
          --h: 49;
          --s: 84;
          --l: 92;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 270;
          --delay: 0.3351159698298485;
          --speed: 0.5;
          --travel: 63;
          --h: 27;
          --s: 54;
          --l: 97;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 9;
          --delay: 0.7532545866575207;
          --speed: 0.8;
          --travel: 129;
          --h: 52;
          --s: 75;
          --l: 58;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 195;
          --delay: 0.4374745398689335;
          --speed: 0.6;
          --travel: 61;
          --h: 54;
          --s: 85;
          --l: 88;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 16;
          --delay: 0.11412009956818281;
          --speed: 0.9;
          --travel: 149;
          --h: 27;
          --s: 63;
          --l: 72;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 30;
          --delay: 0.6031451633362741;
          --speed: 0.9;
          --travel: 104;
          --h: 45;
          --s: 56;
          --l: 82;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 214;
          --delay: 0.5720794163116438;
          --speed: 1;
          --travel: 112;
          --h: 43;
          --s: 59;
          --l: 51;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 330;
          --delay: 0.27934202073025505;
          --speed: 0.2;
          --travel: 119;
          --h: 29;
          --s: 84;
          --l: 70;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 129;
          --delay: 0.18705535605489132;
          --speed: 1;
          --travel: 126;
          --h: 53;
          --s: 56;
          --l: 64;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 52;
          --delay: 0.018766039343215635;
          --speed: 0.9;
          --travel: 64;
          --h: 51;
          --s: 59;
          --l: 62;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 301;
          --delay: 0.42040307930325427;
          --speed: 0.2;
          --travel: 136;
          --h: 60;
          --s: 72;
          --l: 92;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 198;
          --delay: 0.8723377235628624;
          --speed: 0.5;
          --travel: 55;
          --h: 36;
          --s: 51;
          --l: 72;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 90;
          --delay: 0.15316320350618295;
          --speed: 0.2;
          --travel: 89;
          --h: 33;
          --s: 97;
          --l: 54;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 149;
          --delay: 0.04065406222405632;
          --speed: 0.7;
          --travel: 99;
          --h: 45;
          --s: 80;
          --l: 81;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 172;
          --delay: 0.3622718081270846;
          --speed: 0.2;
          --travel: 114;
          --h: 28;
          --s: 57;
          --l: 97;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 16;
          --delay: 0.7343525600622594;
          --speed: 0.6;
          --travel: 59;
          --h: 51;
          --s: 94;
          --l: 51;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 103;
          --delay: 0.6101654053197698;
          --speed: 0.8;
          --travel: 106;
          --h: 56;
          --s: 78;
          --l: 99;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 223;
          --delay: 0.015842791239301768;
          --speed: 0.7;
          --travel: 51;
          --h: 28;
          --s: 80;
          --l: 87;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 39;
          --delay: 0.27478083412089305;
          --speed: 1;
          --travel: 110;
          --h: 37;
          --s: 90;
          --l: 58;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 271;
          --delay: 0.21087709625622142;
          --speed: 0.8;
          --travel: 118;
          --h: 58;
          --s: 73;
          --l: 95;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 158;
          --delay: 0.8791301572529298;
          --speed: 0.9;
          --travel: 56;
          --h: 32;
          --s: 84;
          --l: 74;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 197;
          --delay: 0.04465182506068266;
          --speed: 0.3;
          --travel: 76;
          --h: 58;
          --s: 54;
          --l: 69;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 117;
          --delay: 0.8399661487299006;
          --speed: 0.4;
          --travel: 116;
          --h: 49;
          --s: 86;
          --l: 63;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 41;
          --delay: 0.05097465453686745;
          --speed: 0.6;
          --travel: 125;
          --h: 56;
          --s: 88;
          --l: 57;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 341;
          --delay: 0.8410001215277705;
          --speed: 0.6;
          --travel: 140;
          --h: 48;
          --s: 52;
          --l: 56;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 236;
          --delay: 0.023034444269822485;
          --speed: 0.4;
          --travel: 68;
          --h: 45;
          --s: 88;
          --l: 63;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 19;
          --delay: 0.8617798419042506;
          --speed: 0.7;
          --travel: 71;
          --h: 53;
          --s: 70;
          --l: 85;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 271;
          --delay: 0.2754377580103131;
          --speed: 1;
          --travel: 139;
          --h: 39;
          --s: 98;
          --l: 75;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 213;
          --delay: 0.9132617560888441;
          --speed: 0.7;
          --travel: 73;
          --h: 21;
          --s: 85;
          --l: 54;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 335;
          --delay: 0.6719643561247786;
          --speed: 0.9;
          --travel: 106;
          --h: 57;
          --s: 54;
          --l: 69;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 138;
          --delay: 0.3523519441435239;
          --speed: 0.5;
          --travel: 137;
          --h: 54;
          --s: 77;
          --l: 85;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 46;
          --delay: 0.7544508808956227;
          --speed: 0.4;
          --travel: 94;
          --h: 29;
          --s: 82;
          --l: 78;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 147;
          --delay: 0.8031513974779514;
          --speed: 0.7;
          --travel: 106;
          --h: 31;
          --s: 61;
          --l: 62;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 343;
          --delay: 0.19660398964827186;
          --speed: 0.2;
          --travel: 87;
          --h: 55;
          --s: 78;
          --l: 61;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 167;
          --delay: 0.34243055211869255;
          --speed: 0.6;
          --travel: 124;
          --h: 27;
          --s: 99;
          --l: 65;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 185;
          --delay: 0.8438605195935112;
          --speed: 0.4;
          --travel: 67;
          --h: 54;
          --s: 52;
          --l: 80;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 213;
          --delay: 0.8168988134275836;
          --speed: 0.8;
          --travel: 95;
          --h: 46;
          --s: 71;
          --l: 99;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 23;
          --delay: 0.933506977310891;
          --speed: 1;
          --travel: 99;
          --h: 32;
          --s: 55;
          --l: 87;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 237;
          --delay: 0.566389498800274;
          --speed: 0.4;
          --travel: 110;
          --h: 35;
          --s: 80;
          --l: 54;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 78;
          --delay: 0.305631819946393;
          --speed: 1;
          --travel: 89;
          --h: 34;
          --s: 66;
          --l: 59;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 100;
          --delay: 0.4088903673072388;
          --speed: 0.3;
          --travel: 97;
          --h: 44;
          --s: 59;
          --l: 63;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 346;
          --delay: 0.05972093989736704;
          --speed: 0.6;
          --travel: 122;
          --h: 31;
          --s: 59;
          --l: 53;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 135;
          --delay: 0.25702989953401567;
          --speed: 0.2;
          --travel: 118;
          --h: 33;
          --s: 92;
          --l: 63;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 108;
          --delay: 0.2296478449395063;
          --speed: 0.9;
          --travel: 93;
          --h: 21;
          --s: 66;
          --l: 94;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 199;
          --delay: 0.012426665988166663;
          --speed: 0.9;
          --travel: 113;
          --h: 27;
          --s: 76;
          --l: 67;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 93;
          --delay: 0.22794317043524903;
          --speed: 0.7;
          --travel: 113;
          --h: 37;
          --s: 72;
          --l: 74;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 76;
          --delay: 0.527735089599983;
          --speed: 0.6;
          --travel: 52;
          --h: 35;
          --s: 83;
          --l: 57;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 192;
          --delay: 0.023383361836615935;
          --speed: 0.5;
          --travel: 148;
          --h: 40;
          --s: 57;
          --l: 95;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 99;
          --delay: 0.6044099550962103;
          --speed: 1;
          --travel: 99;
          --h: 54;
          --s: 98;
          --l: 70;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 76;
          --delay: 0.5069849795738213;
          --speed: 1;
          --travel: 130;
          --h: 28;
          --s: 61;
          --l: 98;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 348;
          --delay: 0.3360946205987212;
          --speed: 0.7;
          --travel: 62;
          --h: 26;
          --s: 51;
          --l: 75;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 154;
          --delay: 0.5992883207549933;
          --speed: 0.4;
          --travel: 128;
          --h: 25;
          --s: 64;
          --l: 65;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 259;
          --delay: 0.08702725275902856;
          --speed: 0.3;
          --travel: 54;
          --h: 23;
          --s: 65;
          --l: 52;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 355;
          --delay: 0.23630930350969614;
          --speed: 0.9;
          --travel: 63;
          --h: 22;
          --s: 94;
          --l: 61;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 71;
          --delay: 0.802425345452372;
          --speed: 0.4;
          --travel: 63;
          --h: 53;
          --s: 57;
          --l: 83;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 108;
          --delay: 0.7097741864776652;
          --speed: 0.7;
          --travel: 102;
          --h: 41;
          --s: 84;
          --l: 86;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 220;
          --delay: 0.17011033637154482;
          --speed: 0.5;
          --travel: 133;
          --h: 40;
          --s: 63;
          --l: 61;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 48;
          --delay: 0.5322839360595801;
          --speed: 0.9;
          --travel: 148;
          --h: 35;
          --s: 94;
          --l: 57;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 102;
          --delay: 0.5203252097929385;
          --speed: 1;
          --travel: 130;
          --h: 23;
          --s: 98;
          --l: 77;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 352;
          --delay: 0.6947916024980216;
          --speed: 0.3;
          --travel: 125;
          --h: 42;
          --s: 71;
          --l: 52;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 312;
          --delay: 0.800925142602096;
          --speed: 0.3;
          --travel: 92;
          --h: 36;
          --s: 96;
          --l: 67;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 233;
          --delay: 0.3818561745097635;
          --speed: 0.2;
          --travel: 115;
          --h: 55;
          --s: 80;
          --l: 59;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 75;
          --delay: 0.6494579282388833;
          --speed: 0.5;
          --travel: 144;
          --h: 28;
          --s: 52;
          --l: 80;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 264;
          --delay: 0.4779629309181921;
          --speed: 0.5;
          --travel: 76;
          --h: 37;
          --s: 82;
          --l: 90;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 309;
          --delay: 0.12638338716554887;
          --speed: 0.4;
          --travel: 135;
          --h: 40;
          --s: 52;
          --l: 84;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 288;
          --delay: 0.20456171274229984;
          --speed: 1;
          --travel: 78;
          --h: 50;
          --s: 62;
          --l: 54;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 146;
          --delay: 0.5519437678982873;
          --speed: 0.2;
          --travel: 103;
          --h: 46;
          --s: 77;
          --l: 91;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 41;
          --delay: 0.1237503460881626;
          --speed: 0.3;
          --travel: 78;
          --h: 36;
          --s: 55;
          --l: 75;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 261;
          --delay: 0.3038914818677312;
          --speed: 0.5;
          --travel: 118;
          --h: 28;
          --s: 74;
          --l: 56;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 237;
          --delay: 0.5304408890724424;
          --speed: 0.6;
          --travel: 144;
          --h: 46;
          --s: 77;
          --l: 97;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 169;
          --delay: 0.2573322126221367;
          --speed: 0.3;
          --travel: 55;
          --h: 50;
          --s: 89;
          --l: 81;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 205;
          --delay: 0.44481090366579323;
          --speed: 0.8;
          --travel: 150;
          --h: 50;
          --s: 66;
          --l: 87;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 13;
          --delay: 0.0254430596118127;
          --speed: 0.2;
          --travel: 129;
          --h: 28;
          --s: 84;
          --l: 67;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 11;
          --delay: 0.0956039511457738;
          --speed: 0.2;
          --travel: 62;
          --h: 57;
          --s: 98;
          --l: 63;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 204;
          --delay: 0.485508168820564;
          --speed: 0.5;
          --travel: 84;
          --h: 37;
          --s: 69;
          --l: 96;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 87;
          --delay: 0.6443384604287299;
          --speed: 0.5;
          --travel: 105;
          --h: 45;
          --s: 56;
          --l: 95;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 117;
          --delay: 0.05876569762095829;
          --speed: 0.4;
          --travel: 112;
          --h: 27;
          --s: 78;
          --l: 72;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 2;
          --delay: 0.5879842893020297;
          --speed: 0.3;
          --travel: 58;
          --h: 54;
          --s: 55;
          --l: 67;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 322;
          --delay: 0.011006425800013098;
          --speed: 0.6;
          --travel: 143;
          --h: 48;
          --s: 75;
          --l: 74;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 85;
          --delay: 0.06184367765762144;
          --speed: 0.5;
          --travel: 112;
          --h: 52;
          --s: 75;
          --l: 99;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 339;
          --delay: 0.60237492577878;
          --speed: 0.6;
          --travel: 116;
          --h: 36;
          --s: 54;
          --l: 81;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 9;
          --delay: 0.5766467503503707;
          --speed: 0.6;
          --travel: 141;
          --h: 35;
          --s: 68;
          --l: 77;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 170;
          --delay: 0.9474696906545654;
          --speed: 0.5;
          --travel: 65;
          --h: 60;
          --s: 93;
          --l: 69;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 243;
          --delay: 0.8632256834587997;
          --speed: 0.8;
          --travel: 140;
          --h: 51;
          --s: 67;
          --l: 59;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 221;
          --delay: 0.245343384665744;
          --speed: 0.9;
          --travel: 126;
          --h: 54;
          --s: 74;
          --l: 63;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 218;
          --delay: 0.410592413798162;
          --speed: 0.4;
          --travel: 115;
          --h: 51;
          --s: 76;
          --l: 57;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 82;
          --delay: 0.2547594354400331;
          --speed: 0.5;
          --travel: 83;
          --h: 23;
          --s: 92;
          --l: 68;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 142;
          --delay: 0.15426477074529266;
          --speed: 1;
          --travel: 90;
          --h: 55;
          --s: 79;
          --l: 81;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 33;
          --delay: 0.8331725926938225;
          --speed: 0.6;
          --travel: 115;
          --h: 42;
          --s: 72;
          --l: 64;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 85;
          --delay: 0.6828403183280496;
          --speed: 0.4;
          --travel: 102;
          --h: 40;
          --s: 56;
          --l: 83;
        "
      >
      </view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 98;
          --delay: 0.7936282966422992;
          --speed: 0.3;
          --travel: 67;
          --h: 50;
          --s: 55;
          --l: 82;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 91;
          --delay: 0.11902340157163671;
          --speed: 1;
          --travel: 64;
          --h: 50;
          --s: 92;
          --l: 56;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 95;
          --delay: 0.752084695473672;
          --speed: 0.3;
          --travel: 109;
          --h: 50;
          --s: 56;
          --l: 84;
        "
      ></view>
      <view
        class="sparkler__spark"
        style="
          --rotation: 57;
          --delay: 0.25267990908296345;
          --speed: 0.9;
          --travel: 135;
          --h: 41;
          --s: 72;
          --l: 70;
        "
      >
      </view>
    </view>
  </view>
</template>
<script>
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  data() {
    return {};
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.box-shuttle {
  // position: absolute;
  // top: 0;
  // left: 0;
  // width: 100%;
  // height: 100%;
  // cursor: none;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  // touch-action: none;
  view {
    max-width: none;
  }
  // overflow: hidden;
  // --bg: #04050d;
  --glow: rgba(245, 224, 163, 0.5);
  --sparkler-top: #4f4139;
  --sparkler-bottom: #333;
  --spark: #fff;

  view,
  view::after,
  view:before {
    box-sizing: border-box;
  }
  .sparkler {
    position: absolute;
    border-radius: 100%;
    left: calc(var(--x) * 1px);
    top: calc(var(--y) * 1px);
    box-shadow: 0 0 25px 25px var(--glow);
  }

  .sparkler__spark {
    --shadow: hsl(var(--h), calc(var(--s, 100) * 1%), calc(var(--l, 50) * 1%));
    height: 5px;
    position: absolute;
    width: 5px;
    box-shadow: 0 0 20px 4px var(--shadow);
    background: var(--spark);
    border-radius: 100%;
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 0);
    -webkit-animation: spark calc(var(--speed) * 1s) calc(var(--delay) * -1s)
      infinite ease;
    animation: spark calc(var(--speed) * 1s) calc(var(--delay) * -1s) infinite
      ease;
    z-index: 2;
  }
  @-webkit-keyframes spark {
    to {
      opacity: 0;
      transform: rotate(calc(var(--rotation) * 1deg))
        translate(0, calc(var(--travel) * 1px));
    }
  }
  @keyframes spark {
    to {
      opacity: 0;
      transform: rotate(calc(var(--rotation) * 1deg))
        translate(0, calc(var(--travel) * 1px));
    }
  }
}
</style>
